<template>
  <div class="comment-model">
    <div class="user" @click="$router.replace('/UserFeil/replyList?id='+data.user_id),$router.go(0)">
      <div class="me">
        <img :src="data.avatar" alt="" />
        <span>{{ data.nickname }}<span :class="{lv1:data.level>5,lv2:data.level>12}">Lv.{{data.level}}</span></span>
        <span>{{ data.time*1 | Time }} • {{ data.class }}</span>
        <span>{{ data.module }}</span>
      </div>
    </div>
    <div class="title" @click="$router.push('/ViewDetail')">
      <div class="f1">
        <span>{{data.class}}</span>
        <p>{{data.title}}</p>
      </div>
      <div class="f2">
        {{data.show_article}}
      </div>
      <div class="f3">
        <div :style="`background-image:url(${data.imageUrl})`">
           <span v-if="data.imgCount">
            <img src="@/assets/icon8.svg" alt="">
            <p>{{`+${data.imgCount}`}}</p>
            </span>  
        </div>
      </div>
      <div class="f4">
        <ul>
          <li class="pageView"><img src="@/assets/icon9.svg" alt="">{{data.lookView|Mes}}</li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ["Pdata"],
  data() {
    return {
      data: this.Pdata,
    }
  },
  mounted(){
    console.log( '123',this.data)
  },
  filters: {
    Time(value) {
      let s = new Date(value);
      let m = s.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      let d = s.getDate();
      d = d < 10 ? "0" + d : d;
      return `${m}-${d}`;
    },
    Mes(value){
      if(value>10000){
        return (value/10000).toFixed(1) + '万'
      }
    }
  },

};
</script>

<style scoped>
.comment-model {
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;  
  margin: 20px 0;
  padding:5px 10px;
  border-bottom: 1px dashed #999;
  user-select: none;
}
.user{
  width: 50%;
  display: inline-flex;
  vertical-align: middle;
}
.user .me {
  display: inline-flex;
  flex-flow: row nowrap;
}
.user .me img {
  width: 24px;
  height: 24px;
  border-radius: 100%;
  margin-right: 5px;
}
.user .me span {
  /* width: 80px; */
  white-space: nowrap;
  height: 24px;
  color: #999;
  font-size: 10px;
  line-height: 24px;
  -webkit-text-size-adjust:none
}
.user .me :nth-child(2){
  color: black;
}
.user .me :nth-child(2):hover{
  color: #4CC3FF;
}
.user .me span>span{
  box-sizing: border-box;
  margin-left:5px;
  margin-right:8px;
  background: #4CC3FF;
  color: #fff;
  font-size: 10px;
  transform: scale(0.2);
}
.user .me span>span.lv1{
  background: #969CF2;
}
.user .me span>span.lv2{
  background: #FFBF00;
}
.user .me>:nth-child(4){
margin-left: 10px;
}
.gz{
  white-space: nowrap;
  color: white;
  margin-left:30%; 
  line-height: 20px;
  padding: 4px 16px;
  background: #4CC3FF;
  border-radius:20px ;
  transition: 0.5s;
}
.ygz{
  white-space: nowrap;
  background: #999;
  padding: 4px 10px;
}
.gz:hover{
  background: #00D5FF;
}
.title{
  width: 100%;
  margin-top  :14px ;
}
.title .f1{
  font-weight: 600;
  display: inline-flex;
}
.title .f1 p{
  width: 100%;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.title .f1:hover{
  color: #4CC3FF;
}
.title .f1 span{
  background: #4CC3FF ;
  color: white;
  border-radius: 2px;
  height: 22px;
  width: 40px;
  padding: 0 2px;
}
.title .f2{
  width: 100%;
  margin-top:4px ;
  font-size: 14px;
  color: #999;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.title .f3>div{
  position: relative;
  margin-top:4px ;
  width: 120px;
  height: 120px;
  background-repeat:no-repeat;
  background-position:50%;
  background-size: cover;
  border-radius: 10px;
}
.title .f3 span{
  /* display: block; */
  display: inline-flex;
  background: rgba(0, 0, 0, 0.6);
  color:  white;
  position: absolute;
  right: 0;
  bottom: 0;
  line-height: 20px;
  font-size: 12px;
  padding: 2px;
}
.title .f3 span img{
  /* display: inline-block ; */
  width: 16px;
}
.title .f4{
  width: 100%;
  display: flex;
  justify-content:right;
}
.title .f4 ul{
  display: inline-flex;
  width: 210px;
  color: #999 ;
  font-size: 12px;
}
.title .f4 ul li{
  height:20px;
  display: inline-flex;
  margin-right:6px;
  flex-wrap: nowrap;
  align-items: center;
}
.title .f4 ul img{
  width: 22px;
  margin-right:4px;
}
</style>